<template>
  <div>
  <div class='logo'>
  <img src="http://rrk5b8jnj.bkt.clouddn.com/54edd3fd66f44bab4063c914acb523d.png" alt="" style="width: 117px; height: 32px;">
  
  </div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="rgb(52, 55, 68)"
        text-color="#fff"
        active-text-color="#ffd04b" router="true">
        <el-submenu :index="1+1" v-for="i,index in menulist" :key="index">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{i.name}}</span>
          </template>
          <el-menu-item-group> 
            <el-menu-item :index="s.url" v-for="s,index in i['son']" :key="index">{{s.name}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
  </div>
  
  
  </template>
  
  <script>
  export default {
      data() {
        return {
        menulist:[]
        };
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        // 获取菜单数据
        
      },
      mounted(){
        // JSON.parse:转位json格式
        this.menulist = JSON.parse(localStorage.getItem('menulist'))
      }
  
  }
  </script>
  
  <style>
  .logo {
    text-align: center;
    background-color: rgb(52, 55, 68);
    /* height: 100px;
    line-height: 100px;
    padding: 12px 5px; */
    padding: 46px 37px 67px 36px;
    border-right: solid 1px #e6e6e6;
    height: 15px;
  }
  </style>